<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css技巧以及经验总结_技术狂人</title>
<meta name="keywords" content="">
<meta name="description" content="1、如何清除图片下方出现几像素的空白间隙？2、如何让文本垂直对齐文本输入框？3、如何让单行文本在容器内垂直居中？4、如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果？">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="static/css/base.css" rel="stylesheet">
<link href="static/css/index.css" rel="stylesheet">
<link href="static/css/info.css" rel="stylesheet">
<link href="static/css/m.css" rel="stylesheet">
<script src="static/js/jquery.min.js"></script>
<script src="static/js/jquery.easyfader.min.js"></script>
<script src="static/js/hc-sticky.js"></script>
<script src="static/js/comm.js"></script>

<script type="text/javascript" src="static/js/ajax.js"></script>
</head>
<body>
<header class="header-navigation" id="header">
  <nav>
    <div class="logo"><a href="index.html">技术狂人</a></div>
    <h2 id="mnavh"><span class="navicon"></span></h2>
 <ul id="starlist">
<li><a href="index.html">首页</a></li>
 
 
<li><a href="about.html">关于我</a></li> 
 
 
<li><a href="life.html">慢生活</a></li> 
 
 
<li class="selected"><a href="study.html">学无止境</a></li> 
 
 
<li><a href="time.html">时间轴</a></li> 
 
    </ul>
    <div class="searchbox">
    <div id="search_bar" class="search_bar">
      <form id="searchform" action="/e/search/index.php" method="post" name="searchform">
        <input class="input" placeholder="想搜点什么呢.." type="text" name="keyboard" id="keyboard">
        <input type="hidden" name="show" value="title">
        <input type="hidden" name="tempid" value="1">
        <input type="hidden" name="tbname" value="news">
        <input type="hidden" name="Submit" value="搜索">
        <p class="search_ico"> <span></span></p>
      </form>
     </div> 
    </div>
  </nav>
</header>
<article>
  <main>
  <div class="infosbox">
    <div class="newsview">
      <h3 class="news_title">css技巧以及经验总结</h3>
      <div class="bloginfo">
        <ul>
          <li class="author">
作者：冼子明</li>
          <li class="lmname">学习笔记</li>
          <li class="timer">2014-05-14</li>
          <li class="view"><script src="static/js/-14_30_1.js"></script>人已阅读</li>
        </ul>
      </div>
      <div class="tags"></div>
      <div class="news_about"><strong>简介</strong>1、如何清除图片下方出现几像素的空白间隙？2、如何让文本垂直对齐文本输入框？3、如何让单行文本在容器内垂直居中？4、如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果？</div>
      <div class="news_con"><p><strong>推荐链接：</strong></p>

<div class="shili">
<p><strong><span style="color: rgb(0, 0, 0);">html css 十一条网页设计经典实用的代码片段</span></strong></p>

<p><strong><span style="color: rgb(0, 0, 0);">Div+CSS 规则整理 以及注意问题</span></strong></p>

<p><strong><span style="color: rgb(0, 0, 0);">10条HTML代码编写技巧</span></strong></p>

<p><strong><span style="color: rgb(0, 0, 0);">CSS常见的问题和技巧总结</span></strong></p>
</div>

<p><strong>1、如何清除图片下方出现几像素的空白间隙？</strong></p>

<p class="shili">方法1：img{display:block;} &nbsp;方法2： img{vertical-align:top;}</p>

<p><strong>2、如何让文本垂直对齐文本输入框？</strong></p>

<p class="shili">input{vertical-align:middle;}</p>

<p><strong>3、如何让单行文本在容器内垂直居中？</strong></p>

<p class="shili">#test{height:25px;line-height:25px;}</p>

<p>/* 只需设置文本的行高等于容器的高度即可 */</p>

<p><strong>4、如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果？</strong></p>

<div class="shili">
<p>a:link{color:#03c;}</p>

<p>a:visited{color:#666;}</p>

<p>a:hover{color:#f30;}</p>

<p>a:active{color:#c30;}</p>

<p>/* 按L-V-H-A的顺序设置超链接样式即可，可速记为LoVe（喜欢）HAte（讨厌）*/</p>
</div>

<p><strong>5、如何使文本溢出边界不换行强制在一行内显示？</strong></p>

<p class="shili">#test{width:150px;white-space:nowrap;}</p>

<p>/* 设置容器的宽度和white-space为nowrap即可，其效果类似&lt;nobr&gt;标签 */</p>

<p><strong>6、如何使文本溢出边界显示为省略号？</strong></p>

<p class="shili">#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}</p>

<p>/* 首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。 */</p>

<p><strong>7、如何使连续的长字符串自动换行？</strong></p>

<p class="shili">#test{width:150px;word-wrap:break-word;}</p>

<p>/* word-wrap的break-word值允许单词内换行 */</p>

<p><strong>8、如何清除浮动？</strong></p>

<p>方法1：</p>

<p class="shili">#test{clear:both;}</p>

<p>/* #test为浮动元素的下一个兄弟元素 */</p>

<p>方法2：</p>

<p class="shili">#test{display:block;zoom:1;overflow:hidden;}</p>

<p>/* #test为浮动元素的父元素。zoom:1也可以替换为固定的width或height */</p>

<p>方法3：</p>

<div class="shili">
<p>#test{zoom:1;}</p>

<p>#test:after{display:block;clear:both;visibility:hidden;height:0;content:&#39;&#39;;}</p>

<p>/* #test为浮动元素的父元素 */</p>
</div>

<p><strong>9、如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？</strong></p>

<div class="shili">
<p>#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}</p>

<p>#test p{*position:absolute;*top:50%;*left:50%;margin:0;}</p>

<p>#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}</p>

<p>/* #test是img的祖父节点，p是img的父节点。Know More：未知尺寸的图片如何水平垂直居中 */</p>
</div>

<p><strong>10、如何设置span的宽度和高度（即如何设置内联元素的宽高）？</strong></p>

<p class="shili">span{display:block;width:200px;height:100px;}</p>

<p>/* 要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，或者position属性等等。 */</p>

<p><strong>11、如何去掉超链接的虚线框？</strong></p>

<p class="shili">a{outline:none;}</p>

<p><strong>12、如何容器透明，内容不透明？</strong></p>

<div class="shili">
<p>.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000/9;filter:alpha(opacity=20)/9;}</p>

<p>.outer .inner{position:relative/9;}<span class="Apple-tab-span" style="white-space:pre"> </span></p>

<p>&lt;div class=&quot;outer&quot;&gt;</p>

<p>&lt;div class=&quot;inner&quot;&gt;我是不透明的内容&lt;/div&gt;</p>

<p>&lt;/div&gt;</p>

<p>/* 高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果 */</p>
</div>

<p><strong>13、如何做1像素细边框的table？</strong></p>

<p>方法1：</p>

<div class="shili">
<p>#test{border-collapse:collapse;border:1px solid #ddd;}</p>

<p>#test th,#test td{border:1px solid #ddd;}</p>

<p>&lt;table id=&quot;test&quot;&gt;</p>

<p>&lt;tr&gt;&lt;th&gt;姓名&lt;/th&gt;&lt;td&gt;Joy Du&lt;/td&gt;&lt;/tr&gt;</p>

<p>&lt;tr&gt;&lt;th&gt;年龄&lt;/th&gt;&lt;td&gt;26&lt;/td&gt;&lt;/tr&gt;</p>

<p>&lt;/table&gt;</p>
</div>

<p>方法2：</p>

<div class="shili">
<p>#test{border-spacing:1px;background:#ddd;}</p>

<p>#test tr{background:#fff;}</p>

<p>&lt;table id=&quot;test&quot; cellspacing=&quot;1&quot;&gt;</p>

<p>&lt;tr&gt;&lt;th&gt;姓名&lt;/th&gt;&lt;td&gt;Joy Du&lt;/td&gt;&lt;/tr&gt;</p>

<p>&lt;tr&gt;&lt;th&gt;年龄&lt;/th&gt;&lt;td&gt;26&lt;/td&gt;&lt;/tr&gt;</p>

<p>&lt;/table&gt;</p>

<p>/* IE7及更早浏览器不支持border-spacing属性，但是可以通过table的标签属性cellspacing来替代。*/</p>
</div>

<p><strong>14、如何让层在falsh上显示？</strong></p>

<p class="shili">&lt;param name=&quot;wmode&quot; value=&quot;transparent&quot; /&gt;</p>

<p><strong>15、如何使用标准的方法在页面上插入flash？</strong></p>

<div class="shili">
<p>&lt;object id=&quot;flash-show&quot; type=&quot;application/x-shockwave-flash&quot; data=&quot;*.swf&quot;&gt;</p>

<p>&lt;param name=&quot;movie&quot; value=&quot;*.swf&quot; /&gt;</p>

<p>&lt;param name=&quot;wmode&quot; value=&quot;transparent&quot; /&gt;</p>

<p>&lt;img src=&quot;*.jpg&quot; alt=&quot;用于不支持flash或屏蔽flash时显示&quot; /&gt;</p>

<p>&lt;/object&gt;</p>

<p>/* 至于flash的宽高可以在css里设置 */</p>
</div>
 </div>
    </div>
    <div class="share">
<p class="diggit"><a href="JavaScript:makeRequest('/e/public/digg/?classid=14&id=30&dotop=1&doajax=1&ajaxarea=diggnum','EchoReturnedText','GET','');"> 很赞哦！ </a>(<b id="diggnum"><script type="text/javascript" src="static/js/-12_58_5.js"></script></b>)</p>

</div>
    <div class="nextinfo">
      <p>上一篇：<a href='29.html'>IE6到底哪里不好？你还继续用IE6吗？</a></p>
      <p>下一篇：<a href='31.html'>IE常见bugs以及解决方案列表</a></p>
    </div>
  </div>
  </main>
  <aside id="stickMe">
    <div class="r_box">     
      <div class="tuijian">
        <h2 id="tab"><a href="#" class="current">点击排行</a><a href="#">站长推荐</a></h2>       
     <div id="content">
        <ul style="display:block;">
          <li><a href="32.html" target="_blank">鼠标悬停图片、文字css3效果 </a></li>
          <li><a href="27.html" target="_blank">帝国cms常用标签调用方法总结（不得不收藏哦）... </a></li>
          <li><a href="" target="_blank">css技巧以及经验总结 </a></li>
          <li><a href="33.html" target="_blank">从摄影作品中获取网页颜色搭配技巧 </a></li>
          <li><a href="28.html" target="_blank">使用ASPCMS建站网站被黑 </a></li>
          <li><a href="29.html" target="_blank">IE6到底哪里不好？你还继续用IE6吗？ </a></li>
          <li><a href="31.html" target="_blank">IE常见bugs以及解决方案列表 </a></li>
        </ul>             
        <ul>
          <li><a href="27.html" target="_blank">帝国cms常用标签调用方法总结（不得不收藏哦）... </a></li>
          <li><a href="28.html" target="_blank">使用ASPCMS建站网站被黑 </a></li>
          <li><a href="29.html" target="_blank">IE6到底哪里不好？你还继续用IE6吗？ </a></li>
          <li><a href="" target="_blank">css技巧以及经验总结 </a></li>
          <li><a href="31.html" target="_blank">IE常见bugs以及解决方案列表 </a></li>
          <li><a href="32.html" target="_blank">鼠标悬停图片、文字css3效果 </a></li>
          <li><a href="33.html" target="_blank">从摄影作品中获取网页颜色搭配技巧 </a></li>
        </ul>
       </div>
      </div>
 <div class="wdxc">
        <h2>图文精选</h2>
        <ul>
                     <li><a href="35.html" title="帝国cms列表页调用关键字tag标签" target="_blank"><img src="static/picture/fbe877634a8eb658f4d19b83c960d6ab.png"></a></li>
                     <li><a href="18.html" title="IP要突破2000+了" target="_blank"><img src="static/picture/a85973b7e8d151108aee2deb83c18f97.jpg"></a></li>
                     <li><a href="" title="css技巧以及经验总结" target="_blank"><img src="static/picture/ce3c6881c5f27e55588f8f9843d8be38.jpg"></a></li>
                     <li><a href="29.html" title="IE6到底哪里不好？你还继续用IE6吗？" target="_blank"><img src="static/picture/b1d8cde248671b1e75ef302609595b1f.jpg"></a></li>
                     <li><a href="27.html" title="帝国cms常用标签调用方法总结（不得不收藏哦）" target="_blank"><img src="static/picture/a0b65d3d8160f90f6556c4dfa3a85a59.jpg"></a></li>
                     <li><a href="17.html" title="或许换一个活法,能让你走出阴霾" target="_blank"><img src="static/picture/43baa4c7c03ed66bae98696de5ebc64e.jpg"></a></li>
                   </ul>
      </div>
<div class="cloud">
      <h2>标签云</h2>
      <ul>
 <a href="tags.html" target="_blank">云南</a>      </ul>
    </div>
      <div class="guanzhu">
        <h2>关注我 么么哒</h2>
        <ul>
          <img src="static/picture/wx.png">
        </ul>
      </div>
    </div>
  </aside>
</article>
<footer>
  <p>Design by <a href="index.html" target="_blank">技术狂人</a> <a href="http://beian.miit.gov.cn/get="_blank">粤ICP备2024236460号-4</a></p>
</footer>
<a href="#" class="cd-top">Top</a><script src="static/js/js.js"></script></body>
</html>
